import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import AccountDisplay from './AccountDisplay';
import CssBaseline from '@material-ui/core/CssBaseline';
import MainHeader from './MainHeader';
import NewRecord from './NewRecord';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        padding: theme.spacing(1),
        textAlign: 'center',
        backgroundColor: 'rgba(255,255,255,0.5)',
    },
}));

export default function MainPage() {
    const classes = useStyles();

    const [checked, setChecked] = React.useState(false);
    const handleChange = () => {
        setChecked((prev) => !prev);
    };

    return (
        <div className={classes.root}>
            <Grid container>
                <Grid item xs={6}>
                    <MainHeader />
                    <AccountDisplay open={handleChange} />
                </Grid>
                <CssBaseline />
                <Grid item xs={6}>
                    <NewRecord open={checked} apply={setChecked} />
                </Grid>
            </Grid>
        </div>
    );
}